{% extends 'html/all.html' %}
{% block title %}
    首页
{% endblock %}

{% block head_extra %}
    <link crossorigin="anonymous" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }

        .carousel-inner img {
            width: 800px; /* 宽度为800px */
            height: 400px; /* 高度为400px */
            object-fit: cover;
            transition: transform .2s; /* 动画效果 */
        }

        .carousel-inner img:hover {
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }


    </style>
{% endblock %}

{% block content %}
    <!-- 轮播图区域 -->
    <div class="carousel slide" data-bs-ride="carousel" id="carouselExampleIndicators">
        <ol class="carousel-indicators"></ol>
        <div class="carousel-inner"></div>
        <button class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"
                type="button">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一张</span>
        </button>
        <button class="carousel-control-next" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"
                type="button">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一张</span>
        </button>
    </div>
    <!-- 推荐产品区 -->
    <div class="container my-4">
        <h1 class="mb-4">二手市场</h1>
        <!-- 搜索和类别过滤 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="input-group">
                    {#                    <button aria-expanded="false" class="btn btn-outline-secondary dropdown-toggle"#}
                    {#                            data-bs-toggle="dropdown" type="button">#}
                    {#                        类别#}
                    {#                    </button>#}
                    <ul class="dropdown-menu">
                    </ul>
                    {#                    <input class="form-control" placeholder="搜索物品" type="text"/>#}
                    {#                    <button class="btn btn-outline-primary" type="button" id="searchButton">搜索</button>#}
                </div>
            </div>
        </div>
        <!-- 推荐产品 -->
        <h2>推荐产品</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4">

        </div>
        <!-- 推荐用户 -->
        <h2 class="mt-4">推荐用户</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4">

        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            $.ajax({
                url: '/api/get_pictures',  // API 的 URL
                type: 'GET',
                success: function (response) {
                    {#console.log('AJAX 请求成功:', response);  // 添加调试信息#}
                    if (response.status === 'success') {
                        var carouselInner = $('.carousel-inner');
                        var indicators = $('.carousel-indicators');
                        response.data.forEach((item, index) => {
                            var activeClass = index === 0 ? 'active' : '';
                            indicators.append(
                                `<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="${index}" class="${activeClass}" aria-current="${activeClass ? 'true' : ''}" aria-label="Slide ${index + 1}"></button>`
                            );
                            carouselInner.append(
                                `<div class="carousel-item ${activeClass}">
            <a href="${item.href}" target="_blank">
                <img src="${item.src}" class="d-block w-100" alt="${item.alt}">
            </a>
        </div>`
                            );
                        });
                    } else {
                        console.error('加载图片失败:', response.message);
                    }
                },
                error: function (xhr, status, error) {
                    {#console.error('AJAX 请求失败:', error);  // 添加调试信息#}
                }
            });

            // 新的AJAX请求来获取推荐的产品信息
            $.ajax({
                url: '/api/get_shop',  // API 的 URL
                type: 'GET',
                success: function (response) {
                    if (response.status === 'success') {
                        var productRow = $('.row-cols-md-3.g-4').first();  // 获取产品行
                        productRow.empty();  // 清空现有的产品卡片
                        response.data.forEach((item) => {
                            var detailsButton = item.IsSold ? '' : `<a class="btn btn-primary" href="/details?id=${item.ProductID}">查看详情</a>`;
                            productRow.append(
                                `<div class="col">
                    <div class="card">
                        <img alt="产品图片" class="card-img-top" src="${item.ImageURL}"/>
                        <div class="card-body">
                            <h5 class="card-title">${item.ProductName}</h5>
                            <p class="card-text">${item.Description}</p>
                            <p class="card-text">${item.Price}￥</p>
                            <p class="card-text">卖家：${item.username}</p>
                            ${detailsButton}
                        </div>
                    </div>
                </div>`
                            );
                        });
                    } else {
                        console.error('加载产品失败:', response.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX 请求失败:', error);
                }
            });

            // 新的AJAX请求来获取推荐用户信息
            $.ajax({
                url: '/api/get_isGroom',  // API 的 URL
                type: 'GET',
                success: function (response) {
                    {#console.log('AJAX 请求成功:', response);  // 添加调试信息#}
                    if (response.status === 'success') {
                        var userRow = $('.row-cols-md-3.g-4').last();  // 获取用户行
                        userRow.empty();  // 清空现有的用户卡片
                        response.data.forEach((item) => {
                            userRow.append(
                                `<div class="col">
                                <div class="card">
                                    <img alt="用户图片" class="card-img-top rounded-circle mx-auto mt-3" src="${item.img}"/>
                                    <div class="card-body text-center">
                                        <h5 class="card-title">${item.username}</h5>
                                        <p class="card-text">${item.nikename}</p>
                                        <p class="card-text">注册时间：${item.register_time}</p>
                                        <p class="card-text">信用分：${item.Credits}</p>
{#                                        <a class="btn btn-primary" href="#">查看个人资料</a>#}
                                    </div>
                                </div>
                            </div>`
                            );
                        });
                    } else {
                        console.error('加载用户失败:', response.message);
                    }
                },
                error: function (xhr, status, error) {
                    {#console.error('AJAX 请求失败:', error);  // 添加调试信息#}
                }
            });
            $.ajax({
                url: '/api/get_categoryName',  // API 的 URL
                type: 'GET',
                success: function (response) {
                    if (response.status === 'success') {
                        var dropdownMenu = $('.input-group .dropdown-menu');
                        dropdownMenu.empty();  // 清空现有的菜单项
                        response.data.forEach((item) => {
                            dropdownMenu.append(`<li class="dropdown-item category-item">${item.CategoryName}</li>`);
                        });
                    } else {
                        console.error('加载类别失败:', response.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX 请求失败:', error);
                }
            });
            // 将点击事件绑定到新的类上
            $(document).on('click', '.category-item', function () {
                var selectedCategory = $(this).text();
                $('.input-group .dropdown-toggle').text(selectedCategory);
            });

            $('#searchButton').click(function () {
                var searchText = $('.input-group input').val();
                var selectedCategory = $('.input-group .dropdown-toggle').text();
                window.open('/show?searchText=' + encodeURIComponent(searchText) + '&selectedCategory=' + encodeURIComponent(selectedCategory), '_blank');
            });
            {#$('#searchButton').click(function () {#}
            {#    var searchText = $('.input-group input').val();#}
            {#    var selectedCategory = $('.input-group .dropdown-toggle').text();#}
            {#    window.location.href = '/show?searchText=' + encodeURIComponent(searchText) + '&selectedCategory=' + encodeURIComponent(selectedCategory);});#}
        });

    </script>
{% endblock %}

{% block footer %}
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
            <span class="text-muted">© 2021 二手市场</span>
        </div>
    </footer>
{% endblock %}